#z-toast-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;

  .z-toast {
    /* transition: all 3s ease-in-out; */
    &.slide-in {
      animation: slide-in 0.3s ease-in-out;
    }
    &.slide-out {
      animation: slide-out 0.3s ease-in-out;
    }

    padding: 10px 20px;
    border-radius: 5px;
    color: #fff;
    font-size: 16px;
    margin-bottom: 10px;
    &.success {
      background-color: #4caf50;
    }
    &.error {
      background-color: #f44336;
    }
    &.warning {
      background-color: #ff9800;
    }
  }
}

@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-out {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-100%);
  }
}
